<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .display-none{
    display: none;
  }

  .top{
    background: #f8f8f8;
  }
</style>

<template>
  <div>
    <v-header></v-header>
    <div class="main-style padding-top position-relative">
      <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem :to="{ path: `/${this.$route.params.code}` }">{{ $route.query.boxName }}</BreadcrumbItem>
        <BreadcrumbItem>{{ $route.params.code }}书库</BreadcrumbItem>
      </Breadcrumb>
      <div class="float-left align-center">
        <Table class="margin-top-l" stripe :columns="listColumn" :data="listData"></Table>
        <Page class="margin-top" style="right: 0;" :current="listPage.current" :page-size="listPage.size" :total="listPage.total" show-total @on-change="changeCurrent"></Page>
      </div>
    </div>
    <v-footer class="float-left width-100"></v-footer>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        listColumn: [
//          { title: '序号',key: 'index', type: 'index' },
          { title: '书名',
            key: 'title',
            width: 150,
            align: 'center',
            render: (h,params) =>{
            return h('div',[
              h('Button',{ props: {
                type: 'text',
                size: 'small'
              },
                on: {
                  click: () => {
                    this.section(params.row)
                  }
                }
              },params.row.title)
            ])
          } },
//          { title: '作者',key: 'author' },
//          { title: '章节数',key: 'total' },
          { title: '更新时间',key: 'updateTime' }
        ],
        listData: [],
        listPage: {
          current: 1,
          size: 15,
          total: 10
        }
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      // 初始化数据
      fetchData () {
        this.$http.get('/api/book/listBook',{
          categoryId: 1,
          pageNum: this.listPage.current,
          pageSize: this.listPage.size
        })
          .then((res) => {
            if (res) {
              this.listData = res.result.list
              this.listPage.total = res.result.total
            }
          })
      },
      // 改变页码
      changeCurrent (val) {
        this.listPage.current = val
        this.fetchData()
      },
      // 刷新本页面
      reload () {
        this.$router.go(0)
      },
      // 跳转到章节页面
      section (data) {
        this.$router.push({
          path: `/${this.$route.params.code}/list/${data.id}`,
          query: {
            name: data.title
          }
        })
      }
    }
  }
</script>
